<template>
  <el-dialog
    title="修改密码"
    :modal="false"
    :visible.sync="passwordVisible"
    width="400px"
    :close-on-click-modal="false"
    destroy-on-close
    @close="handleClose"
  >
    <div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="password" label-width="0">
          <el-input
            placeholder="请输入旧密码"
            autocomplete="new-password"
            v-model="form.password"
            show-password
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label-width="0">
          <el-input
            placeholder="请输入新密码"
            autocomplete="new-password"
            show-password
            v-model="form.newPassword"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword1" label-width="0">
          <el-input
            placeholder="请确认新密码"
            autocomplete="new-password"
            show-password
            v-model="form.newPassword1"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" style="text-align: right">
      <el-button type="primary" @click="onConfirm">确定</el-button>
      <el-button @click="passwordVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import { changeAccountApi } from '@/api/account'
// import { clearSessionStorage } from '@/util/util'

import { changeUserPwdApi, resetUserApi } from "@/api/modules/user.api";
import { passwordEncryption } from "@/util/encrypt";

export default {
  data() {
    return {
      passwordVisible: false,
      form: {
        password: "",
        newPassword: "",
        newPassword1: "",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "change",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "change",
          },
        ],
        newPassword1: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    init() {
      this.passwordVisible = true;
    },
    handleClose() {
      this.form = {};
      this.passwordVisible = false;
    },
    onConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // console.log("onConfirm");
          if (this.form.newPassword === this.form.newPassword1) {
            const password = passwordEncryption(this.form.newPwd);
            const oldPassword = passwordEncryption(this.form.password);
            await changeUserPwdApi({ userId: this.id, newPwd: password,oldPwd: oldPassword });
            this.$message({
              message: "成功",
              type: "success",
            });
            this.handleClose();
          } else {
            this.$message({
              message: "两次密码不一致",
              type: "warning",
            });
          }
        }
      });
    },

    handleChoiceFile() {
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
    },
  },
};
</script>
<style lang="less" scoped>
.pagination {
  width: 100%;
  text-align: right;
}

.delete {
  margin-left: 12px;
  color: #409eff;
  cursor: pointer;
}

.delete:hover {
  color: #f56c6c;
}
</style>
